import 'package:flutter/material.dart';
import 'package:kasax/utils/img_utils.dart';

class BoxDecorationDemo extends StatelessWidget {
  const BoxDecorationDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text("BoxDecoration"),
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Container(
              margin: EdgeInsets.only(top: 16.0, bottom: 16.0),
              color: Colors.grey[100],
              child: Column(
                children: [
                  SizedBox(
                    height: 15,
                  ),
                  buildBorderStyleContainer(),
                  SizedBox(
                    height: 15,
                  ),
                  Text("圆角"),
                  Container(
                    height: 200,
                    child: ListView(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      // physics: NeverScrollableScrollPhysics(),
                      children: [
                        buildBorderStyleContainer1(),
                        SizedBox(
                          width: 15,
                        ),
                        buildBorderStyleContainer2(),
                        SizedBox(
                          width: 15,
                        ),
                        buildBorderStyleContainer3(),
                        SizedBox(
                          width: 15,
                        )
                      ],
                    ),
                  ),
                  Text("阴影"),
                  buildBorderStyleContainer4(),
                  SizedBox(
                    height: 15,
                  ),
                  Text("形状"),
                  buildBorderStyleContainer5(),
                  SizedBox(
                    height: 15,
                  ),
                  Text("渐变"),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      buildBorderStyleContainer6(),
                      SizedBox(
                        width: 15,
                      ),
                      buildBorderStyleContainer7(),
                    ],
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Text("圆角形状"),
                  Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                        color: Colors.amber,
                        border: Border.all(
                            color: Colors.redAccent,
                            width: 3,
                            style: BorderStyle.solid),
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                              offset: Offset(5, 5),
                              color: Colors.purple,
                              blurRadius: 5)
                        ],
                        gradient:
                            LinearGradient(colors: [Colors.green, Colors.red])),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Text("圆角图片"),
                  // Container(
                  //   width: 150,
                  //   height: 150,
                  //   decoration: BoxDecoration(
                  //       borderRadius: BorderRadius.circular(20),
                  //       image: DecorationImage(
                  //           fit: BoxFit.cover, // 这个属性一定要加，否则会看不到圆角
                  //           image: NetworkImage(
                  //             "https://img0.baidu.com/it/u=2040241356,750325338&fm=26&fmt=auto",
                  //           ))),
                  // )
                  // ImageUtils.buildRoundImg2("https://img0.baidu.com/it/u=2040241356,750325338&fm=26&fmt=auto")
                  ImageUtils.buildRoundImgByClipRRect(16 / 9, 16.0,
                      "https://img0.baidu.com/it/u=2040241356,750325338&fm=26&fmt=auto")
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Container buildBorderStyleContainer() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                color: Color.fromRGBO(3, 54, 255, 1.0),
                // border: Border(
                //   top: BorderSide(
                //     color: Colors.green,
                //     width: 3.0,
                //     style: BorderStyle.solid
                //   ),
                //   bottom: BorderSide(
                //       color: Colors.green,
                //       width: 3.0,
                //       style: BorderStyle.solid
                //   )
                // )
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid)),
          )
        ],
      ),
    );
  }

  buildBorderStyleContainer1() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.circular(16)),
          )
        ],
      ),
    );
  }

  buildBorderStyleContainer2() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16.0),
                    topRight: Radius.circular(16.0),
                    bottomRight: Radius.circular(16.0))),
          )
        ],
      ),
    );
  }

  buildBorderStyleContainer3() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                borderRadius:
                    BorderRadius.only(topLeft: Radius.circular(64.0))),
          )
        ],
      ),
    );
  }

  // 阴影练习
  buildBorderStyleContainer4() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Color.fromRGBO(16, 20, 188, 1.0),
                      offset: Offset(0.0, 16.0),
                      blurRadius: 25.0, // 阴影大小
                      spreadRadius: -9.0)
                ],
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.all(Radius.circular(16))),
          )
        ],
      ),
    );
  }

  // 形状
  buildBorderStyleContainer5() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Color.fromRGBO(16, 20, 188, 1.0),
                      offset: Offset(0.0, 16.0),
                      blurRadius: 25.0, // 阴影大小
                      spreadRadius: -9.0)
                ],
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                shape: BoxShape.circle),
          )
        ],
      ),
    );
  }

  buildBorderStyleContainer6() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Color.fromRGBO(16, 20, 188, 1.0),
                      offset: Offset(0.0, 16.0),
                      blurRadius: 25.0, // 阴影大小
                      spreadRadius: -9.0)
                ],
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                shape: BoxShape.circle,
                gradient: RadialGradient(colors: [
                  Color.fromRGBO(7, 102, 255, 1.0),
                  Color.fromRGBO(3, 28, 128, 1.0),
                ])),
          )
        ],
      ),
    );
  }

  buildBorderStyleContainer7() {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(16),
            child: Icon(
              Icons.animation,
              color: Colors.white,
              size: 60,
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Color.fromRGBO(16, 20, 188, 1.0),
                      offset: Offset(0.0, 16.0),
                      blurRadius: 25.0, // 阴影大小
                      spreadRadius: -9.0)
                ],
                color: Color.fromRGBO(3, 54, 255, 1.0),
                border: Border.all(
                    color: Colors.indigoAccent.shade100,
                    width: 3.0,
                    style: BorderStyle.solid),
                shape: BoxShape.circle,
                gradient: LinearGradient(colors: [
                  Color.fromRGBO(7, 102, 255, 1.0),
                  Color.fromRGBO(3, 28, 128, 1.0),
                ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
          )
        ],
      ),
    );
  }
}
